<template>
  <div class="page-container">
    <div class="page-content">
      <!--搜索-->
      <div class="panel-container">
        <searchuinew :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording"></searchuinew>
      </div>
      <!-- 状态tab -->
      <div class="panel-container no-margin">
        <div class="tabs">
          <div v-for="item in stsList" :key="item.name" class="tab" :class="tabActive === item.sts && 'active'" @click="handleTabChange(item.sts)">
            <p class="tab-text">{{ item.name }}({{ tabCount[item.tabCount] }})</p>
          </div>
        </div>
        <!--数据信息-->
        <!-- 申领中 -->
        <div v-show="tabActive === 1">
          <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column align="center" header-align="center" label="企业名称" prop="company_name" width="250"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系人" prop="company_boss" width="200"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系电话" prop="company_phone" width="200"></el-table-column>
            <el-table-column align="center" header-align="center" label="行业分类" prop="first_class" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="状态" prop="stsName" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="申领人" prop="owner_name" width="150"></el-table-column>
            <!-- <el-table-column align="center" header-align="center" label="来源渠道" prop="source" width="150"></el-table-column> -->
            <el-table-column align="center" header-align="center" label="来源时间" prop="created_time" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" fixed="right" header-align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="grey" @click="detail(scope)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 已申领 -->
        <div v-show="tabActive === 2">
          <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column align="center" header-align="center" label="企业名称" prop="company_name" width="250"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系人" prop="company_boss" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系电话" prop="company_phone" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="行业分类" prop="first_class" width="100"></el-table-column>
            <el-table-column align="center" header-align="center" label="状态" prop="stsName" width="100"></el-table-column>
            <el-table-column align="center" header-align="center" label="申领人" prop="owner_name" width="150"></el-table-column>
            <!-- <el-table-column align="center" header-align="center" label="来源渠道" prop="source" width="150"></el-table-column> -->
            <el-table-column align="center" header-align="center" label="来源时间" prop="created_time" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" header-align="center" label="自动踢出时间" prop="accept_down_time" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" fixed="right" header-align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="grey" @click="detail(scope)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 跟踪中 -->
        <div v-show="tabActive === 3">
          <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column align="center" header-align="center" label="企业名称" prop="company_name" width="250"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系人" prop="company_boss" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系电话" prop="company_phone" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="行业分类" prop="first_class" width="100"></el-table-column>
            <el-table-column align="center" header-align="center" label="状态" prop="stsName" width="100"></el-table-column>
            <el-table-column align="center" header-align="center" label="跟踪人" prop="owner_name" width="150"></el-table-column>
            <!-- <el-table-column align="center" header-align="center" label="来源渠道" prop="source" width="150"></el-table-column> -->
            <el-table-column align="center" header-align="center" label="来源时间" prop="created_time" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" header-align="center" label="自动踢出时间" prop="accept_down_time" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" fixed="right" header-align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="grey" @click="detail(scope)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 回访提醒 -->
        <div v-show="tabActive === 4">
          <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column align="center" header-align="center" label="企业名称" prop="company_name" width="250"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系人" prop="contact_name" width="200"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系电话" prop="contact_phone" width="200"></el-table-column>
            <el-table-column align="center" header-align="center" label="行业分类" prop="first_class" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="状态" width="100">跟踪中</el-table-column>
            <el-table-column align="center" header-align="center" label="跟踪人" prop="follow_man" width="200"></el-table-column>
            <!-- <el-table-column align="center" header-align="center" label="来源渠道" prop="source" width="150"></el-table-column> -->
            <el-table-column align="center" header-align="center" label="来源时间" prop="created_time" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" fixed="right" header-align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="grey" @click="detail(scope)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 即将提出 -->
        <div v-show="tabActive === 5">
          <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading" :row-class-name="tableRowClassName">
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column align="center" header-align="center" label="企业名称" prop="company_name" width="250"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系人" prop="company_boss" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="联系电话" prop="company_phone" width="150"></el-table-column>
            <el-table-column align="center" header-align="center" label="行业分类" prop="first_class" width="100"></el-table-column>
            <el-table-column align="center" header-align="center" label="状态" prop="stsName" width="100"></el-table-column>
            <el-table-column align="center" header-align="center" label="跟踪人" prop="owner_name" width="150"></el-table-column>
            <!-- <el-table-column align="center" header-align="center" label="来源渠道" prop="source" width="150"></el-table-column> -->
            <el-table-column align="center" header-align="center" label="来源时间" prop="created_time" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" header-align="center" label="自动踢出时间" prop="accept_down_time" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" fixed="right" header-align="center" label="操作" width="100">
              <template slot-scope="scope">
                <el-button size="mini" type="text" class="grey" @click="detail(scope)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          small
          background
          :current-page="pageIndex"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="totalPage"
          @current-change="currentChangeHandle"
          @size-change="sizeChangeHandle"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 20px; text-align: right"
        ></el-pagination>
      </div>
    </div>

    <el-drawer title="客户详情" :visible.sync="showDrawer" size="80%">
      <popup v-if="showDrawer" :id="currentId" />
    </el-drawer>
  </div>
</template>

<script>
import { apiMyCustomerList, apiUserList, apiLabelList } from '@/api/customer'
import popup from '../components/popupDetail.vue'

export default {
  name: 'index',
  components: { popup },
  data() {
    return {
      searchFormArr: [
        {
          fieldName: '企业名称：',
          type: 'input',
          field: 'company_name',
          placeholder: '请输入企业名称',
        },
        {
          fieldName: '联系人：',
          type: 'input',
          field: 'company_boss',
          placeholder: '请输入联系人',
        },
        {
          fieldName: '联系电话：',
          type: 'input',
          field: 'company_phone',
          placeholder: '请输入联系电话',
        },
        {
          fieldName: '标签：',
          type: 'select',
          field: 'label_ids',
          option: [],
          placeholder: '请选择标签',
          multiple: true,
        },
        {
          fieldName: '申领人：',
          type: 'select',
          field: 'user_id',
          option: [],
          placeholder: '请选择申领人',
        },
      ],
      isAccording: true,
      tabActive: 2,
      tabCount: {
        tab1: 0,
        tab2: 0,
        tab3: 0,
        tab4: 0,
        tab5: 0,
      },
      searchParams: {
        company_name: '',
        company_boss: '',
        company_phone: '',
        label_ids: [],
        user_id: '',
      },
      stsList: [
        { sts: 1, name: '申领中', tabCount: 'tab1' },
        { sts: 2, name: '已申领', tabCount: 'tab2' },
        { sts: 3, name: '跟踪中', tabCount: 'tab3' },
        { sts: 4, name: '回访提醒', tabCount: 'tab4' },
        { sts: 5, name: '即将踢出', tabCount: 'tab5' },
      ],

      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      showDrawer: false,
      currentId: '',
    }
  },
  mounted() {
    this.getDataList()
    this.getUserList()
    this.getLabelList()
  },
  methods: {
    // tab切换
    handleTabChange(index) {
      this.tabActive = index
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.searchParams.label_ids === '' && (this.searchParams.label_ids = [])
      const info = Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize, sts: this.tabActive }, this.searchParams)
      apiMyCustomerList(info)
        .then((res) => {
          const { data, total, tab_count } = res.data
          data.forEach((item) => {
            const stsItem = this.stsList.find((sta) => {
              return sta.sts === item.sts
            })
            if (stsItem) {
              item.stsName = stsItem.name
            } else {
              item.stsName = ''
            }
          })
          this.dataList = data
          this.totalPage = total
          this.tabCount = tab_count
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.tabCount = {
            tab1: 0,
            tab2: 0,
            tab3: 0,
            tab4: 0,
            tab5: 0,
          }
          this.dataListLoading = false
        })
    },
    // 获取申领人下拉信息
    getUserList() {
      apiUserList().then((res) => {
        const { data } = res
        if (data.length <= 0) return
        this.searchFormArr.find((item) => {
          return item.field === 'user_id'
        }).option = data.map((item) => {
          return {
            id: item.id,
            text: item.name,
          }
        })
      })
    },
    // 获取标签下拉信息
    getLabelList() {
      apiLabelList().then((res) => {
        const { data } = res
        if (data.length <= 0) return
        this.searchFormArr.find((item) => {
          return item.field === 'label_ids'
        }).option = data.map((item) => {
          return {
            id: item.id,
            text: item.name,
          }
        })
      })
    },
    // 列表查询
    searchParma(e) {
      this.searchFormArr.forEach((item) => {
        if (e[item.field]) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      this.pageIndex = 1
      this.getDataList()
    },

    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    //详情
    detail(scope) {
      this.currentId = scope.row.id
      this.showDrawer = true
    },
    // 高亮显示
    tableRowClassName({ row, rowIndex }) {
      if (row.is_high_light) {
        return 'high-light'
      }
      return ''
    },
  },
}
</script>

<style scoped lang="scss">
.tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  .tab {
    line-height: 0.6;
    padding: 0px 12px;
    border: 1px solid #dcdfe6;
    border-left: none;
    cursor: pointer;
    font-size: 12px;
    color: #606266;
    &:hover {
      background: #f5f7fa;
    }
    &:first-child {
      border-left: 1px solid #dcdfe6;
      border-radius: 4px 0 0 4px;
    }
    &:last-child {
      border-radius: 0 4px 4px 0;
    }
    &.active {
      background: #409eef;
      color: #ffffff;
    }
  }
}
::v-deep .high-light {
  color: #f56c6c;
}
</style>
